

<template>
  <el-dialog v-model="dialogVisible" title="预警设置列表" :close-on-click-modal="false" width="80%">
    <div>
      <div class="title-flex">
        <div>
          <!--          预警设置列表-->
        </div>
        <div>
          <el-button type="primary" @click="addClick">新增</el-button>
          <el-button @click="handleDeletes">删除</el-button>
        </div>
      </div>
    </div>
    <div>
      <el-table :data="tableData" @sort-change="handleSortChange" ref="tableRef"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="标题" sortable="s.name"></el-table-column>
        <el-table-column prop="projectTypeCodeName" label="项目分类" sortable="t.name"></el-table-column>
        <el-table-column prop="executionCycle" label="项目执行周期" sortable="s.execution_cycle"></el-table-column>
        <el-table-column prop="executionMonths" label="预警触发条件：项目执行满" sortable="s.execution_months"></el-table-column>
        <el-table-column prop="sendMode" label="发送方式" sortable="s.send_mode">
          <template #default="{ row }">
            {{ getSendModeName(row.sendMode) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" plain size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button type="primary" plain size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="example-pagination-block">
      <el-pagination layout="->,prev, pager, next, total" :total="count" currentPage1="10"
        @current-change="handleCurrentChange" />
    </div>
  </el-dialog>


  <add ref="addyjsz" @submit-form="Getalarmsetlist"></add>
  <compile ref="compileyjsz" @compilesubmit-form="Getalarmsetlist"></compile>
</template>
<script setup lang="ts">
import {
  getCategory,
  alarmsetlist,remove
} from './../../../api/money/yjxxApi'
import {ElMessage, ElMessageBox} from "element-plus";
import add from "./addyjszDialog.vue";
import compile from './compileyjszDialog.vue'
const compileyjsz = ref(null)
const handleEdit = (row) => {
  compileyjsz.value.openaddDialog(row)
}
const addyjsz = ref(null)
const addClick = () => {
  addyjsz.value.openaddDialog()
}
const getListParme = ref({
  orderByColumn:"",
  isAsc:"",
})
const getCategorys = () => {
  getCategory({
    bizName: "通知方式"
  })
      .then((res)=>{
        sendModeData.value = res.data
      })
}
const sendModeData = ref([])
// 根据 sendMode code 获取对应的 name
const getSendModeName = (code) => {
  const item = sendModeData.value.find(item => item.code === code);
  return item? item.name : '未知';
};
//分页
const count = ref(0);
// 存储选中的行数据
const selectedProjects = ref([]);
// 处理选中项变化
const handleSelectionChange = (val) => {
  selectedProjects.value = val;
};
const handleCurrentChange = (val) => {
  const requestData = {...getListParme.value};
  alarmsetlist({
    ...requestData,
    pageNum:val,
    pageSize:10,
  })
      .then((res)=>{
        count.value = res.total
        tableData.value = res.rows
      })
}
const Getalarmsetlist = function (){
  const requestData = {...getListParme.value};
  alarmsetlist({
    ...requestData,
    pageNum:1,
    pageSize:10,
  })
      .then((res)=>{
        count.value = res.total
        tableData.value = res.rows
      })
  getCategorys()
}

const dialogVisible = ref(false)
const openDialog = function (){
  dialogVisible.value = true
  Getalarmsetlist()
}

// 模拟表格数据
const tableData = ref([
  {
    name: '项目 A',
    projectTypeCode: 'PT001',
    executionCycle: '12 个月',
    executionMonths: 6,
    sendMode: '邮件'
  },
  {
    name: '项目 B',
    projectTypeCode: 'PT002',
    executionCycle: '24 个月',
    executionMonths: 12,
    sendMode: '短信'
  },
  {
    name: '项目 C',
    projectTypeCode: 'PT003',
    executionCycle: '18 个月',
    executionMonths: 9,
    sendMode: '微信'
  }
]);

// 处理排序变化
const handleSortChange = (row) => {
  getListParme.value.orderByColumn = row.column.sortable;
  getListParme.value.isAsc=row.order;
  Getalarmsetlist();
};


// 删除操作
const handleDelete = (row) => {
    ElMessageBox.confirm(
        '确认！删除这条数据?',
        '提醒',
        {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          remove(row.id)
              .then((res)=>{
                if(res.code == 200){
                  ElMessage({
                    message: res.msg,
                    type: 'success',
                  })
                  Getalarmsetlist()
                }else {
                  ElMessage({
                    message: res.msg,
                    type: 'error',
                  })
                }
              })


        })
        .catch(() => {
          // ElMessage({
          //   type: 'info',
          //   message: 'Delete canceled',
          // })
        })

};
// 批量删除操作
const handleDeletes = (row) => {
  if(selectedProjects.value.length < 1){
    ElMessage({
      type: 'info',
      message: '请选择删除项',
    })
  }else {
    ElMessageBox.confirm(
        '确认！删除这条数据?',
        '提醒',
        {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          const idString = selectedProjects.value.map(item => item.id).join(',');


        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })

  }
};
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.title-flex{
  display: flex;
  justify-content: space-between;
}
</style>